// Copyright (c) 2025 Beijing Volcano Engine Technology Co., Ltd.
// SPDX-License-Identifier: Apache-2.0

import React from 'react'
import { Button, Tooltip } from '@arco-design/web-react'

interface AIToggleButtonProps {
  onClick: () => void
  isActive?: boolean
}

const AIToggleButton: React.FC<AIToggleButtonProps> = ({ onClick, isActive = false }) => {
  return (
    <Tooltip position="left">
      <Button
        type="text"
        icon={
          isActive ? (
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#000">
              <g clip-path="url(#clip0_3_134833)">
                <path
                  d="M9.66699 14C10.0351 14.0002 10.333 14.2989 10.333 14.667C10.3329 15.035 10.035 15.3329 9.66699 15.333H6.33398C5.96576 15.333 5.66716 15.0557 5.66699 14.6875C5.66699 14.3194 5.96494 14.0001 6.33301 14H9.66699ZM7.93457 0.667969C8.38879 0.659525 8.84049 0.702838 9.28027 0.796875C9.65136 0.87624 9.84128 1.27344 9.71387 1.63086C9.58893 1.98099 9.20574 2.16042 8.83984 2.09473C8.55146 2.04286 8.25684 2.01891 7.96094 2.02441C7.18771 2.0388 6.43282 2.25285 5.77539 2.64258C5.11823 3.03225 4.58236 3.5836 4.22266 4.23828C3.86303 4.89288 3.69267 5.62753 3.72754 6.36621C3.76249 7.10507 4.00158 7.82255 4.42188 8.44336C4.84224 9.06432 5.42832 9.56685 6.12012 9.89746C6.35834 10.0114 6.50971 10.2478 6.50977 10.5068V11.9766H9.5791V10.5068C9.57916 10.2471 9.73149 10.01 9.9707 9.89648C10.091 9.83937 10.3049 9.70824 10.5176 9.57031C10.838 9.36248 11.2683 9.40825 11.5234 9.69238C11.7899 9.98913 11.7605 10.4293 11.4229 10.6416C11.2328 10.7611 11.054 10.8643 10.9688 10.9131V12.1182C10.9687 12.4435 10.8343 12.7534 10.5986 12.9805C10.3631 13.2073 10.0457 13.333 9.7168 13.333H6.37207C6.04321 13.333 5.7257 13.2073 5.49023 12.9805C5.25459 12.7534 5.12021 12.4434 5.12012 12.1182V10.9121C4.37593 10.484 3.7404 9.89639 3.26367 9.19238C2.70576 8.36819 2.38552 7.41414 2.33887 6.42969C2.29229 5.44513 2.52102 4.46674 2.99902 3.59668C3.47697 2.7268 4.18696 1.99693 5.05469 1.48242C5.92254 0.967945 6.91722 0.686908 7.93457 0.667969ZM11.2158 2.67773C11.3349 2.21976 11.9844 2.21825 12.1055 2.67578L12.2256 3.13086C12.3946 3.77147 12.8955 4.27235 13.5361 4.44141L13.9902 4.56152C14.4483 4.68242 14.4469 5.33246 13.9883 5.45117L13.542 5.56738C12.8976 5.73416 12.3926 6.2354 12.2227 6.87891L12.1055 7.32422C11.9844 7.78187 11.3348 7.78035 11.2158 7.32227L11.1025 6.88477C10.9349 6.23743 10.4286 5.73201 9.78125 5.56445L9.34473 5.45117C8.88631 5.33233 8.88486 4.68247 9.34277 4.56152L9.78711 4.44336C10.4307 4.2735 10.9328 3.76943 11.0996 3.125L11.2158 2.67773Z"
                  fill="white"
                />
              </g>
              <defs>
                <clipPath id="clip0_3_134833">
                  <rect width="16" height="16" fill="#000" />
                </clipPath>
              </defs>
            </svg>
          ) : (
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <g clip-path="url(#clip0_3_138818)">
                <path
                  d="M9.66699 13.9999C10.0351 14.0001 10.333 14.2988 10.333 14.6669C10.3329 15.0349 10.035 15.3328 9.66699 15.3329H6.33398C5.96576 15.3329 5.66716 15.0556 5.66699 14.6874C5.66699 14.3194 5.96494 14 6.33301 13.9999H9.66699ZM7.93457 0.667908C8.38879 0.659464 8.84049 0.702777 9.28027 0.796814C9.65136 0.876179 9.84128 1.27337 9.71387 1.6308C9.58893 1.98093 9.20574 2.16036 8.83984 2.09467C8.55146 2.0428 8.25684 2.01885 7.96094 2.02435C7.18771 2.03874 6.43282 2.25279 5.77539 2.64252C5.11823 3.03219 4.58236 3.58354 4.22266 4.23822C3.86303 4.89282 3.69267 5.62747 3.72754 6.36615C3.76249 7.10501 4.00158 7.82249 4.42188 8.4433C4.84224 9.06426 5.42832 9.56678 6.12012 9.8974C6.35834 10.0113 6.50971 10.2477 6.50977 10.5068V11.9765H9.5791V10.5068C9.57916 10.247 9.73149 10.0099 9.9707 9.89642C10.091 9.83931 10.3049 9.70818 10.5176 9.57025C10.838 9.36242 11.2683 9.40819 11.5234 9.69232C11.7899 9.98907 11.7605 10.4293 11.4229 10.6415C11.2328 10.761 11.054 10.8642 10.9688 10.913V12.1181C10.9687 12.4434 10.8343 12.7533 10.5986 12.9804C10.3631 13.2073 10.0457 13.3329 9.7168 13.3329H6.37207C6.04321 13.3329 5.7257 13.2072 5.49023 12.9804C5.25459 12.7533 5.12021 12.4434 5.12012 12.1181V10.912C4.37593 10.484 3.7404 9.89633 3.26367 9.19232C2.70576 8.36813 2.38552 7.41408 2.33887 6.42963C2.29229 5.44507 2.52102 4.46667 2.99902 3.59662C3.47697 2.72673 4.18696 1.99687 5.05469 1.48236C5.92254 0.967884 6.91722 0.686847 7.93457 0.667908ZM11.2158 2.67767C11.3349 2.2197 11.9844 2.21819 12.1055 2.67572L12.2256 3.1308C12.3946 3.7714 12.8955 4.27229 13.5361 4.44135L13.9902 4.56146C14.4483 4.68235 14.4469 5.3324 13.9883 5.45111L13.542 5.56732C12.8976 5.73409 12.3926 6.23534 12.2227 6.87885L12.1055 7.32416C11.9844 7.78181 11.3348 7.78029 11.2158 7.3222L11.1025 6.8847C10.9349 6.23737 10.4286 5.73195 9.78125 5.56439L9.34473 5.45111C8.88631 5.33227 8.88486 4.68241 9.34277 4.56146L9.78711 4.4433C10.4307 4.27344 10.9328 3.76937 11.0996 3.12494L11.2158 2.67767Z"
                  fill="#3F3F51"
                />
              </g>
              <defs>
                <clipPath id="clip0_3_138818">
                  <rect width="16" height="16" fill="white" />
                </clipPath>
              </defs>
            </svg>
          )
        }
        onClick={onClick}
        style={{
          position: 'absolute',
          top: '20px',
          right: '30px', // When the AI assistant is open, move the button to its left
          zIndex: 10,
          // width: '28px',
          height: '28px',
          borderRadius: '8px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: isActive ? '#000' : '#F6F8FA',
          color: isActive ? '#fff' : '#000'
        }}>
        <span style={{ fontWeight: 500 }}>Chat with AI</span>
      </Button>
    </Tooltip>
  )
}

export default AIToggleButton
